<template>
	<view>
		<view style="height: 52upx;">
			<view style="width: 750upx;height: 324upx;background: #20A6FF;border-radius: 0upx 0upx 40upx 40upx;"></view>
		</view>
		<view class="avatar flex-between">
			<view class="flex-between">
				<image src="https://alipic.lanhuapp.com/xd0cdfd74b-ef97-4ec2-9c91-ddd2bc15bf5e" mode="aspectFill"></image>
				<label style="margin-left: 20upx;">郑师傅</label>
			</view>
			<view style="font-size: 24upx;font-weight: 500;color: #FFFFFF;" @click="goTo('/pages/userInfo/index')">
				<van-icon name="edit" />点击修改
			</view>
		</view>
		<view class="info-card">
			<view class="flex-between">
				<view class="info-card-title">车辆信息</view>
				<view style="font-size: 24upx;font-weight: 500;color: var(--theme-color);" @click="goTo('/pages/authentication/index')">
					<van-icon name="edit" />司机认证
				</view>
			</view>
			<image src="https://alipic.lanhuapp.com/xd0cdfd74b-ef97-4ec2-9c91-ddd2bc15bf5e" mode="aspectFill"></image>
			<image src="https://alipic.lanhuapp.com/xd0cdfd74b-ef97-4ec2-9c91-ddd2bc15bf5e" mode="aspectFill"></image>
			<view class="flex-between" style="margin: 30upx 0upx;">
				<label>车牌号：川49256z</label>
				<label>使用性质：运输</label>
			</view>
			<view>
				<label>车型：平板货车	</label>
			</view>
		</view>
		<view class="info-card">
			<view class="flex-between">
				<view class="info-card-title">我的钱包</view>
				<view style="font-size: 24upx;font-weight: 500;color: var(--theme-color);" @click="goTo('/pages/financialRecords/index')">
					<van-icon name="orders-o" />财务记录
				</view>
			</view>
			<view class="flex-between" style="margin-top: 40upx;width: 100%;">
				<view class="info-card-amount flex-column-between" style="align-items: center;">
					<label>违约金(元)</label>
					<label class="info-card-amount-price">600.00</label>
					<view @click="showCharge=true" class="buttonCenter" style="width: 284upx;height: 48upx;background: #FFFFFF;border: 2upx solid #20A6FF;border-radius: 10upx;font-size: 24upx;font-weight: bold;color: #20A6FF;">违约金充值</view>
				</view>
				<view class="info-card-amount flex-column-between" style="align-items: center;">
					<label>我的收益(元)</label>
					<label class="info-card-amount-price">3600.00</label>
					<view @click="showWithdraw=true" class="buttonCenter" style="width: 276upx;height: 48upx;background-color: #20A6FF;border-radius: 10upx;font-size: 24upx;font-weight: bold;color: #FFFFFF;">收益提现</view>
				</view>
			</view>
		</view>
		<view class="cells">
			<button class="clear-button" open-type="contact">
				<van-cell icon="service-o" title="客服中心" is-link  />
			</button>
			<van-cell icon="description" title="意见反馈" is-link url="/pages/feedback/index" />
			<van-cell icon="logistics" title="司机招募" is-link url="/pages/share/index" />
			<van-cell icon="shop-o" title="关于平台" is-link url="/pages/about/index" />
			<van-cell icon="warning-o" title="当前版本" value="V1.01"/>
		</view>
		<button class="logout button" @click="toLogin">退出登录</button>
		<van-action-sheet :show="showCharge" title="充值" @cancel="showCharge=false" @click-overlay="showCharge=false" @close="showCharge=false" >
			<van-field type="number":value="chargeValue" @input="chargeValue=$event.detail.value" label="充值金额" />
			<view class="chargeSelect flex-around">
				<view class="chargeSelect-item" :style="chargeSelectItem==0?'border: 2upx solid #FFB758;':''" @click="chargeSelectItem=0">
					<image src="../../static/weixin.png" mode="aspectFit"></image>
					<label>微信支付</label>
				</view>
				<view class="chargeSelect-item" :style="chargeSelectItem==1?'border: 2upx solid #FFB758;':''" @click="chargeSelectItem=1">
					<image src="../../static/zhifubao.png" mode="aspectFit"></image>
					<label>微信支付</label>
				</view>
			</view>
			<button class="button">充值</button>
		</van-action-sheet>
		<van-action-sheet :show="showWithdraw" title="提现" @cancel="showWithdraw=false" @click-overlay="showWithdraw=false" @close="showWithdraw=false" >
			<van-field type="number":value="withdrawValue" @input="withdrawValue=$event.detail.value" label="提现金额" />
			<view class="chargeSelect flex-around">
				<view class="chargeSelect-item" :style="withdrawSelectItem==0?'border: 2upx solid #FFB758;':''" @click="withdrawSelectItem=0">
					<image src="../../static/weixin.png" mode="aspectFit"></image>
					<label>微信支付</label>
				</view>
				<view class="chargeSelect-item" :style="withdrawSelectItem==1?'border: 2upx solid #FFB758;':''" @click="withdrawSelectItem=1">
					<image src="../../static/zhifubao.png" mode="aspectFit"></image>
					<label>微信支付</label>
				</view>
			</view>
			<button class="button">确定</button>
		</van-action-sheet>
	</view>
</template>

<script>
	export default{
		data(){
			return{
				showCharge:false,
				chargeValue:'',
				chargeSelectItem:0,
				showWithdraw:false,
				withdrawValue:'',
				withdrawSelectItem:0,
			}
		},
		methods:{
			toLogin(){
				uni.reLaunch({
					url:'/pages/login/index'
				});
			}
		}
	}
</script>

<style lang="scss" scoped>
	.avatar{
		margin: 0 36upx;
		font-size: 32upx;
		font-weight: bold;
		color: #FFFFFF;
		image{
			width: 120upx;
			height: 120upx;
			border-radius: 50%;
		}
	}
	.info-card{
		margin: 40upx 32upx;
		padding: 40upx;
		background-color: #FFFFFF;
		border-radius: 20upx;
		font-size: 28upx;
		font-weight: 500;
		color: #666666;
		.info-card-title{
			font-size: 32upx;
			font-weight: bold;
			color: #333333;
			padding-left: 10upx;
			border-left: 8upx solid var(--theme-color);
		}
		image{
			width: 138upx;
			height: 138upx;
			display: inline-block;
			margin: 20upx;
		}
		.info-card-amount{
			width: 50%;
			height: 200upx;
			font-size: 28upx;
			font-weight: 500;
			color: #666666;
			.info-card-amount-price{
				font-size: 40upx;
				font-weight: bold;
				color: #333333;
			}
		}
	}
	.chargeSelect{
		margin-top: 60upx;
		margin-bottom: 60upx;
		.chargeSelect-item{
			width: 326upx;
			height: 104upx;
			background: #FFFFFF;
			border: 2upx solid #FFFFFF;
			border-radius: 20upx;
			display: flex;
			align-items: center;
			justify-content: center;
			font-size: 28upx;
			font-weight: 400;
			color: #666666;
			image{
				width: 60upx;
				height: 60upx;
				margin-right: 10upx;
			}
		}
	}
	.cells{
		width: 686upx;
		margin: 0 auto;
		border-radius: 10upx;
	}
	.logout{
		margin-top: 70upx;
		margin-bottom: 50upx;
	}
</style>
